<template>
  <view class="deco-vip-privilege" :style="[innerStyle]">
    <zm-navbar :is-back="isBack" title="会员中心" :title-color="isBlack ? '#333' : '#fff'" :border-bottom="false" gradient gradient-heigt="50"> </zm-navbar>
    <image v-for="(item, index) in list" :key="index" class="bg-image" :style="[backgroundImageStyle(index)]" mode="scaleToFill" :src="item.data.backgroundImage" />
    <swiper class="swiper" :current="swiperIndex" :circular="false" next-margin="35rpx" previous-margin="35rpx" :indicator-dots="false" :autoplay="false" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
        <image class="swiper-image" :class="{ 'is-active': swiperIndex == index }" :src="item.data.vipCardUrl"></image>
        <view class="swiper-top">
          <!-- 普通会员 -->
          <template v-if="item.type == 'vipOne'">
            <!-- 登录状态 -->
            <block v-if="login">
              <view v-if="vipLevel == 1" class="current-tag" :style="{ background: `linear-gradient(88deg, ${themeColorRgba(0.2, item.type)} 0%, ${themeColorRgba(0.4, item.type)} 100%)` }">
                当前等级
              </view>
              <text v-if="vipLevel == 1" :style="{ color: themeColorRgba(1, item.type) }">会员有效期：永久有效</text>
              <text v-else :style="{ color: themeColorRgba(1, item.type) }">当前已高于该等级</text>
            </block>
          </template>
          <!-- 至尊会员 -->
          <template v-if="item.type == 'vipTwo'">
            <!-- 登录状态 -->
            <block v-if="login">
              <!-- 已开通 -->
              <block v-if="vipLevel == 2">
                <view class="current-tag" :style="{ background: `linear-gradient(88deg, ${themeColorRgba(0.5, item.type)} 0%, ${themeColorRgba(1, item.type)} 100%)` }">当前等级</view>
                <text :style="{ color: themeColorRgba(1, item.type) }">会员有效期：{{ userInfo.vipCardList.endTime | splitDate }}</text>
              </block>
              <block v-if="vipLevel != 2 && userInfo.openingTimes != 0">
                <text :style="{ color: themeColorRgba(1, item.type) }">会员已过期,开通后可继续享受至尊权益</text>
              </block>
            </block>
            <!-- 未登录 -->
            <block v-else> </block>
          </template>
        </view>
        <view class="swiper-bottom">
          <!-- 普通会员 -->
          <template v-if="item.type == 'vipOne'">
            <!-- 登录状态 -->
            <block v-if="login">
              <text v-if="vipLevel == 1" :style="{ color: themeColorRgba(1, item.type) }">每月1日可固定享受此特权</text>
            </block>
            <!-- 未登录 -->
            <block v-else>
              <text :style="{ color: themeColorRgba(1, item.type) }">“权”新会员特权，登录立即解锁观影权益</text>
            </block>
          </template>
          <!-- 至尊会员 -->
          <template v-if="item.type == 'vipTwo'">
            <!-- 登录状态 -->
            <block v-if="login !== readOnly">
              <!-- 未开通 -->
              <block v-if="vipLevel != 2">
                <text v-if="userInfo.openingTimes == 0" :style="{ color: themeColorRgba(1, item.type) }">{{ baseInfo.priSubject || manifest.name }}至尊会员，与你记录美好时光</text>
                <zm-icon-text
                  v-else
                  custom-class="ml-auto"
                  name="arrow"
                  text="开通记录"
                  text-left
                  :color="themeColorRgba(1, item.type)"
                  :text-color="themeColorRgba(1, item.type)"
                  @click="handleClickRecord"
                ></zm-icon-text>
              </block>
              <block v-else>
                <view class="renew-button" :style="{ color: themeColorRgba(1, item.type) }" @click="handleRenew">续费</view>
                <zm-icon-text
                  v-if="isVip"
                  name="arrow"
                  text="开通记录"
                  custom-class="mt-18"
                  text-left
                  :color="themeColorRgba(1, item.type)"
                  :text-color="themeColorRgba(1, item.type)"
                  @click="handleClickRecord"
                ></zm-icon-text>
              </block>
            </block>
            <!-- 未登录 -->
            <block v-else>
              <text :style="{ color: themeColorRgba(1, item.type) }">最{{ baseInfo.priSubject || manifest.name }}至尊会员，与你记录美好时光</text>
            </block>
          </template>
        </view>
      </swiper-item>
    </swiper>
    <view class="flex justify-center my-30 relative z-10">
      <text class="font-26 font-500 text-white">尊享会员{{ privilegeCount }}大权益</text>
    </view>
    <view class="grid grid-cols-4 px-35 relative z-10 gap-y-36">
      <view v-for="(item, index) in privilegeList" :key="index" class="flex flex-col items-center">
        <view class="privilege-icon" :style="[privilegeIconStyle(item)]">
          <image class="w-full h-full" :src="item.icon" mode="scaleToFill" />
          <template v-if="isLock">
            <view class="lock-icon">
              <zm-icon name="lock" color="#fff"></zm-icon>
            </view>
            <view class="icon-mask" :style="[privilegeIconStyle(item), { background: themeColorRgba(0.2, 'vipOne') }]"></view>
          </template>
          <template v-if="swiperIndex == 1">
            <view v-if="!login || vipLevel != 2" class="lock-icon">
              <zm-icon name="lock" color="#fff"></zm-icon>
            </view>
            <view v-if="!login || vipLevel != 2" class="icon-mask" :style="[privilegeIconStyle(item), { background: themeColorRgba(0.2, 'vipTwo') }]"></view>
          </template>
        </view>
        <text class="mt-6 font-26 font-500 text-white text-row-1">{{ item.title }}</text>
        <text class="mt-6 font-22 font-500 text-white text-row-1">{{ item.subTitle }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import manifest from "@/manifest.json"
import { mapGetters } from "vuex"
import { mitt } from "@/utils/mitt"
import { useDecoUnit } from "@/decoration/utils/style"
export default {
  name: "deco-vip-privilege",
  mixins: [mixin],
  props: {
    readOnly: { type: Boolean, default: false },
    defaultVipLevel: { type: [String, Number], default: 0 }
  },
  data() {
    return {
      manifest,
      list: [],
      routes: [],
      isBlack: false,
      swiperIndex: 0,
      swiperWidth: 0
    }
  },
  computed: {
    ...mapGetters(["vipOneDeco", "vipTwoDeco", "login", "baseInfo", "userInfo"]),
    isLock() {
      if (this.swiperIndex == 0 && !this.login) return true
      if (this.swiperIndex == 0 && this.userInfo.level == "2") return true
      return false
    },
    isVip() {
      return this.login && this.decoData.type == "vipTwo" && this.userInfo.level == "2"
    },
    vipLevel() {
      return this.userInfo.level
    },
    themeColorRgba() {
      return (a = 1, type = "vipOne") => {
        const color = type == "vipOne" ? this.vipOneDeco?.config?.themeColor : this.vipTwoDeco?.config?.themeColor
        const { r, g, b } = uni.$hexToRgb(color || "#6F0282")
        return `rgba(${r},${g},${b}, ${a})`
      }
    },
    privilegeIconStyle() {
      return () => {
        const style = {}
        if (this.list[this.swiperIndex]?.data?.iconRadius) {
          style["border-radius"] = useDecoUnit(this.list[this.swiperIndex].data.iconRadius)
        }
        return style
      }
    },
    backgroundImageStyle() {
      return (index) => {
        const style = {}
        style["opacity"] = this.swiperIndex === index ? 1 : 0
        return style
      }
    },
    imageHeight() {
      return (index) => {
        return this.swiperIndex === index ? "310rpx" : "282rpx"
      }
    },
    privilegeList() {
      return this.list[this.swiperIndex]?.data?.list || []
    },
    privilegeCount() {
      return this.list[this.swiperIndex]?.data?.list?.length || 0
    },
    decoDatas() {
      return [this.vipOneDeco, this.vipTwoDeco]
    },
    decoData() {
      return this.decoDatas[this.swiperIndex] || {}
    },
    isBack() {
      return this.routes.length > 1
    }
  },
  watch: {
    decoDatas: {
      handler(v) {
        this.handleGenData(v)
      },
      immediate: true
    }
  },
  mounted() {
    this.handleInit()
    this.routes = getCurrentPages()
  },
  methods: {
    handleInit() {
      this.swiperIndex = this.defaultVipLevel
      if (this.userInfo.level == 2) this.swiperIndex = 1
      const { mitt } = this.useParent("zm-view")
      if (mitt) {
        mitt.on("scroll", (top) => {
          this.isBlack = top > 25
        })
      }
    },
    handleGenData(val) {
      let list = val?.filter((item) => item?.content?.length && item.content.find((v) => v.name === "vip-privilege"))
      list = list?.map((item) => item?.content?.find((v) => v.name === "vip-privilege"))
      this.list = list?.map((item, index) => {
        if (list.length == 2) {
          item.type = index == 0 ? "vipOne" : "vipTwo"
        } else if (list.length == 1) {
          item.type = "vipTwo"
        }
        return item
      })
      this.$nextTick(async () => {
        const rect = await this.useRect(".swiper-item")
        if (rect) this.swiperWidth = rect.width
      })
    },
    handleSwiperChange({ detail }) {
      this.swiperIndex = detail.current
      mitt.emit("deco-vip-privilege.change", this.swiperIndex)
    },
    handleRenew() {
      this.mitt.emit("deco-vip-buy-button.open", this.decoData.type)
    },
    handleClickRecord() {
      uni.$toView("pages/member/vip-open-record/vip-open-record")
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-vip-privilege {
  display: flex;
  position: relative;
  padding-bottom: 70rpx;
  flex-direction: column;

  .bg-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.5s ease-out;
  }
  .swiper {
    width: 100%;
    height: 340rpx;
    .swiper-item {
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;
      .swiper-top {
        top: 100rpx;
        left: 0;
        width: 100%;
        display: flex;
        position: absolute;
        padding: 0 35rpx;
        padding-top: 40rpx;
        flex-direction: column;
        .current-tag {
          color: #fff;
          height: 34rpx;
          padding: 0 16rpx;
          font-size: 22rpx;
          margin-right: auto;
          margin-top: 6rpx;
          margin-bottom: 14rpx;
          border-radius: 10rpx;
        }
      }
      .swiper-bottom {
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        padding: 0 35rpx;
        position: absolute;
        align-items: center;
        padding-bottom: 40rpx;
        justify-content: space-between;
      }
      .swiper-image {
        width: 100%;
        height: 310rpx;
        padding: 8rpx;
        border-radius: 10rpx;
        transition: all 0.3s ease;
        &.is-active {
          height: 340rpx;
        }
      }
      .renew-button {
        height: 36rpx;
        padding: 0 16rpx;
        font-size: 22rpx;
        margin-top: 18rpx;
        margin-right: auto;
        border-radius: 18rpx;
        border: 1rpx solid currentColor;
      }
    }
  }
  .privilege-icon {
    width: 88rpx;
    height: 88rpx;
    position: relative;
    .lock-icon {
      right: 12rpx;
      bottom: 18rpx;
      z-index: 10;
      position: absolute;
    }
    .icon-mask {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }
}
</style>
